<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO Meta Tags -->
    <title>隐私政策 - Linux.do 数据分析工具 | 数据保护与隐私声明</title>
    <meta name="description" content="Linux.do 数据分析工具隐私政策，详细说明数据收集、处理、存储和保护方式。我们承诺100%本地处理，保护用户隐私安全。">
    <meta name="keywords" content="隐私政策,数据保护,隐私声明,数据安全,本地处理,隐私保护">
    <meta name="author" content="Linux.do Community">
    <meta name="robots" content="index, follow">

    <!-- Open Graph -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="隐私政策 - Linux.do 数据分析工具">
    <meta property="og:description" content="详细的隐私保护政策和数据安全说明">
    <meta property="og:site_name" content="Linux.do Analyzer">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="隐私政策 - Linux.do 数据分析工具">
    <meta name="twitter:description" content="数据保护与隐私声明">

    <!-- TailwindCSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
      integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/js/fontawesome.min.js"
      integrity="sha512-obFNtQ1JKCrxPBPLmYDUevlriATl5EhvwU3CFtdW/HKOkeAe0bbsyZfHO44/f1QyndrZJ464TQvrRP9ZjyXSSA=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="min-h-screen" style="background: var(--background-gradient)">

    <!-- Navigation -->
    <nav class="sticky top-0 z-50 backdrop-blur-md border-b" style="background: var(--card-bg); border-color: var(--border-color);">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-4">
                    <a href="index.html" class="flex items-center space-x-2 text-xl font-bold" style="color: var(--primary-color);">
                        <span>📊</span>
                        <span>Linux.do 数据分析</span>
                    </a>
                </div>

                <!-- 桌面端导航 -->
                <div class="hidden md:flex items-center space-x-6">
                    <a href="index.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        数据分析
                    </a>
                    <a href="help.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        使用帮助
                    </a>
                    <a href="about.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        关于我们
                    </a>
                    <a href="faq.html" class="nav-link transition-colors hover:opacity-75" style="color: var(--text-color);">
                        常见问题
                    </a>
                    <a href="privacy.html" class="nav-link current transition-colors" style="color: var(--primary-color); font-weight: 600;">
                        隐私政策
                    </a>

                    <!-- GitHub 链接 -->
                    <a href="https://github.com/dext7r/linux-do-analyzer"
                       target="_blank"
                       class="hidden lg:flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105"
                       style="background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color);">
                        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
                             alt="GitHub" class="w-4 h-4 mr-2 opacity-70">
                        GitHub
                    </a>

                    <!-- 主题切换器 -->
                    <div class="relative">
                        <select id="themeSelector" class="appearance-none rounded-lg px-3 py-2 text-sm border focus:outline-none focus:ring-2 transition-all"
                                style="background: var(--card-bg); color: var(--text-color); border-color: var(--border-color); --tw-ring-color: var(--primary-color);">
                            <option value="apple">简洁</option>
                            <option value="xiaomi">现代</option>
                            <option value="huawei">商务</option>
                        </select>
                    </div>
                </div>

                <!-- 移动端菜单按钮 -->
                <div class="md:hidden">
                    <button id="mobileMenuBtn" class="flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-200"
                            style="background: var(--card-bg); border: 1px solid var(--border-color);">
                        <i class="fas fa-bars" style="color: var(--text-color);"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端菜单 -->
            <div id="mobileMenu" class="md:hidden hidden">
                <div class="px-2 pt-2 pb-3 space-y-1 border-t" style="border-color: var(--border-color);">
                    <a href="index.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        数据分析
                    </a>
                    <a href="help.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        使用帮助
                    </a>
                    <a href="about.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        关于我们
                    </a>
                    <a href="faq.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                        常见问题
                    </a>
                    <a href="privacy.html" class="block px-3 py-2 rounded-md text-base font-medium transition-colors" style="color: var(--primary-color); background: var(--primary-color); background-opacity: 0.1;">
                        隐私政策
                    </a>

                    <!-- 移动端工具 -->
                    <div class="pt-3 border-t" style="border-color: var(--border-color);">
                        <div class="flex items-center justify-between px-3 py-2">
                            <span class="text-sm font-medium" style="color: var(--text-color);">主题</span>
                            <select id="mobileThemeSelector" class="appearance-none rounded px-2 py-1 text-sm border focus:outline-none"
                                    style="background: var(--card-bg); color: var(--text-color); border-color: var(--border-color);">
                                <option value="apple">简洁</option>
                                <option value="xiaomi">现代</option>
                                <option value="huawei">商务</option>
                            </select>
                        </div>
                        <a href="https://github.com/dext7r/linux-do-analyzer" target="_blank"
                           class="flex items-center px-3 py-2 rounded-md text-base font-medium transition-colors hover:bg-gray-100" style="color: var(--text-color);">
                            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
                                 alt="GitHub" class="w-5 h-5 mr-2 opacity-70">
                            GitHub 源码
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container mx-auto px-4 py-8 max-w-7xl">

        <!-- Header -->
        <header class="text-center mb-12">
            <div class="p-8 rounded-3xl shadow-lg" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <div class="w-16 h-16 mx-auto mb-6 rounded-2xl flex items-center justify-center" style="background: var(--primary-color);">
                    <i class="fas fa-shield-alt text-white text-2xl"></i>
                </div>
                <h1 class="text-4xl font-bold mb-4" style="color: var(--text-color);">隐私政策</h1>
                <p class="text-lg leading-relaxed" style="color: var(--text-secondary);">
                    我们致力于保护您的隐私，确保您的数据安全
                </p>
                <div class="text-sm mt-4 px-4 py-2 rounded-full inline-block" style="background: var(--surface-secondary); color: var(--text-muted);">
                    最后更新：2025年9月27日
                </div>
            </div>
        </header>

        <!-- Content -->
        <div class="space-y-8">

            <!-- 核心原则 -->
            <section class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-heart text-red-500 mr-3"></i>
                    核心隐私原则
                </h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                            <i class="fas fa-laptop text-blue-500 mr-2"></i>
                            100% 本地处理
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            所有数据分析完全在您的浏览器中进行，不会上传到任何服务器
                        </p>
                    </div>
                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                            <i class="fas fa-times-circle text-red-500 mr-2"></i>
                            零数据收集
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            我们不收集、存储或传输任何个人数据或分析结果
                        </p>
                    </div>
                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                            <i class="fas fa-wifi-slash text-orange-500 mr-2"></i>
                            离线可用
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            除了加载页面，其他所有功能都可以在断网状态下使用
                        </p>
                    </div>
                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2 flex items-center" style="color: var(--text-color);">
                            <i class="fas fa-code text-green-500 mr-2"></i>
                            开源透明
                        </h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            所有源代码公开，您可以审查和验证我们的隐私承诺
                        </p>
                    </div>
                </div>
            </section>

            <!-- 数据处理说明 -->
            <section class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-cogs text-blue-500 mr-3"></i>
                    数据处理说明
                </h2>

                <div class="space-y-6">
                    <div>
                        <h3 class="text-lg font-semibold mb-3" style="color: var(--text-color);">您上传的数据文件</h3>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                <span style="color: var(--text-secondary);">仅在浏览器内存中临时处理，不会保存到设备存储</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                <span style="color: var(--text-secondary);">关闭浏览器标签页后，所有数据自动清除</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                <span style="color: var(--text-secondary);">不会通过网络传输到任何外部服务器</span>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-3" style="color: var(--text-color);">分析结果</h3>
                        <ul class="space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                <span style="color: var(--text-secondary);">可选择保存到浏览器本地存储 (IndexedDB)</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                <span style="color: var(--text-secondary);">仅您自己可以访问，其他网站无法读取</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                                <span style="color: var(--text-secondary);">可随时清除所有本地存储的数据</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 技术保障 -->
            <section class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-lock text-yellow-500 mr-3"></i>
                    技术安全保障
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-lg font-semibold mb-3" style="color: var(--text-color);">浏览器安全沙盒</h3>
                        <p class="text-sm mb-3" style="color: var(--text-secondary);">
                            利用现代浏览器的安全沙盒环境，确保代码运行的安全性
                        </p>
                        <ul class="space-y-1 text-sm">
                            <li class="flex items-center">
                                <i class="fas fa-shield-check text-green-500 mr-2"></i>
                                <span style="color: var(--text-secondary);">同源策略保护</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-shield-check text-green-500 mr-2"></i>
                                <span style="color: var(--text-secondary);">内容安全策略 (CSP)</span>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-3" style="color: var(--text-color);">文件处理安全</h3>
                        <p class="text-sm mb-3" style="color: var(--text-secondary);">
                            严格的文件类型验证和大小限制，防止恶意文件上传
                        </p>
                        <ul class="space-y-1 text-sm">
                            <li class="flex items-center">
                                <i class="fas fa-shield-check text-green-500 mr-2"></i>
                                <span style="color: var(--text-secondary);">仅接受 .zip 格式文件</span>
                            </li>
                            <li class="flex items-center">
                                <i class="fas fa-shield-check text-green-500 mr-2"></i>
                                <span style="color: var(--text-secondary);">10MB 文件大小限制</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>

            <!-- 第三方服务 -->
            <section class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-cloud text-purple-500 mr-3"></i>
                    第三方服务说明
                </h2>

                <div class="space-y-4">
                    <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                        <h3 class="font-semibold mb-2" style="color: var(--text-color);">CDN 服务</h3>
                        <p class="text-sm" style="color: var(--text-secondary);">
                            我们使用以下 CDN 服务加载必要的库文件，这些服务可能会记录访问日志：
                        </p>
                        <ul class="mt-2 text-sm space-y-1">
                            <li style="color: var(--text-muted);">• TailwindCSS (cdn.tailwindcss.com)</li>
                            <li style="color: var(--text-muted);">• Chart.js (cdn.jsdelivr.net)</li>
                            <li style="color: var(--text-muted);">• jQuery (code.jquery.com)</li>
                            <li style="color: var(--text-muted);">• FontAwesome (kit.fontawesome.com)</li>
                            <li style="color: var(--text-muted);">• JSZip (cdnjs.cloudflare.com)</li>
                        </ul>
                    </div>

                    <div class="p-4 rounded-lg border-l-4 border-blue-500" style="background: var(--surface-secondary);">
                        <p class="text-sm" style="color: var(--text-secondary);">
                            <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                            <strong>重要说明：</strong>这些 CDN 服务仅用于加载页面资源，不会接触到您的分析数据。
                        </p>
                    </div>
                </div>
            </section>

            <!-- 您的权利 -->
            <section class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-user-shield text-green-500 mr-3"></i>
                    您的数据权利
                </h2>

                <div class="grid md:grid-cols-2 gap-6">
                    <div class="space-y-4">
                        <div class="p-3 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold flex items-center mb-2" style="color: var(--text-color);">
                                <i class="fas fa-eye text-blue-500 mr-2"></i>
                                查看权
                            </h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                您可以随时查看本地存储的分析数据
                            </p>
                        </div>

                        <div class="p-3 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold flex items-center mb-2" style="color: var(--text-color);">
                                <i class="fas fa-download text-green-500 mr-2"></i>
                                导出权
                            </h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                您可以导出所有分析数据为 JSON 格式
                            </p>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div class="p-3 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold flex items-center mb-2" style="color: var(--text-color);">
                                <i class="fas fa-eraser text-orange-500 mr-2"></i>
                                删除权
                            </h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                您可以一键清除所有本地存储的数据
                            </p>
                        </div>

                        <div class="p-3 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold flex items-center mb-2" style="color: var(--text-color);">
                                <i class="fas fa-shield-alt text-purple-500 mr-2"></i>
                                控制权
                            </h3>
                            <p class="text-sm" style="color: var(--text-secondary);">
                                您完全控制数据的处理和存储方式
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 联系我们 -->
            <section class="p-8 rounded-2xl" style="background: var(--card-bg); border: 1px solid var(--border-color);">
                <h2 class="text-2xl font-bold mb-6 flex items-center" style="color: var(--text-color);">
                    <i class="fas fa-envelope text-blue-500 mr-3"></i>
                    联系我们
                </h2>

                <div class="space-y-4">
                    <p style="color: var(--text-secondary);">
                        如果您对本隐私政策有任何疑问或建议，请通过以下方式联系我们：
                    </p>

                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">GitHub Issues</h3>
                            <a href="https://github.com/dext7r/linux-do-analyzer/issues"
                               class="text-sm hover:opacity-70 transition-opacity"
                               style="color: var(--primary-color);" target="_blank">
                                <i class="fab fa-github mr-2"></i>
                                提交问题或建议
                            </a>
                        </div>

                        <div class="p-4 rounded-lg" style="background: var(--surface-secondary);">
                            <h3 class="font-semibold mb-2" style="color: var(--text-color);">Linux.do 社区</h3>
                            <a href="https://linux.do/"
                               class="text-sm hover:opacity-70 transition-opacity"
                               style="color: var(--primary-color);" target="_blank">
                                <i class="fas fa-users mr-2"></i>
                                在社区中讨论
                            </a>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </div>

    <!-- Footer -->
    <footer class="relative z-10 bg-white border-t border-gray-200 overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 opacity-30">
            <!-- 光晕效果 -->
            <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-indigo-100 rounded-full filter blur-3xl"></div>
            <div class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-purple-100 rounded-full filter blur-3xl"></div>
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- 主要内容区域 -->
            <div class="py-16">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <!-- 品牌介绍 -->
                    <div class="md:col-span-2">
                        <div class="flex items-center space-x-3 mb-6">
                            <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
                                <span class="text-white text-2xl">📊</span>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-gray-800">
                                    Linux.do Analyzer
                                </h3>
                                <p class="text-sm text-gray-600">专业的论坛数据分析工具</p>
                            </div>
                        </div>
                        <p class="text-gray-600 leading-relaxed mb-6 max-w-md">
                            为 Linux.do 社区用户提供专业的个人数据分析服务，
                            100% 本地处理，保护隐私安全，助您深入了解自己的论坛活动模式。
                        </p>

                        <!-- 特性标签 -->
                        <div class="flex flex-wrap gap-2">
                            <span class="px-3 py-1 bg-indigo-500/20 text-indigo-300 rounded-full text-xs font-medium border border-indigo-500/30">
                                🔒 隐私保护
                            </span>
                            <span class="px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-xs font-medium border border-green-500/30">
                                📊 数据可视化
                            </span>
                            <span class="px-3 py-1 bg-purple-500/20 text-purple-300 rounded-full text-xs font-medium border border-purple-500/30">
                                ⚡ 实时分析
                            </span>
                        </div>
                    </div>

                    <!-- 快速链接 -->
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-gray-800">快速导航</h4>
                        <ul class="space-y-3">
                            <li>
                                <a href="index.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-chart-bar mr-2 group-hover:text-indigo-400"></i>
                                    数据分析
                                </a>
                            </li>
                            <li>
                                <a href="help.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-question-circle mr-2 group-hover:text-blue-400"></i>
                                    使用帮助
                                </a>
                            </li>
                            <li>
                                <a href="faq.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-comments mr-2 group-hover:text-green-400"></i>
                                    常见问题
                                </a>
                            </li>
                            <li>
                                <a href="privacy.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-shield-alt mr-2 group-hover:text-purple-400"></i>
                                    隐私政策
                                </a>
                            </li>
                        </ul>
                    </div>

                    <!-- 社区连接 -->
                    <div>
                        <h4 class="text-lg font-semibold mb-4 text-gray-800">社区连接</h4>
                        <ul class="space-y-3">
                            <li>
                                <a href="https://linux.do" target="_blank" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-external-link-alt mr-2 group-hover:text-orange-400"></i>
                                    Linux.do 论坛
                                </a>
                            </li>
                            <li>
                                <a href="https://github.com/dext7r/linux-do-analyzer" target="_blank" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" class="w-4 h-4 mr-2 opacity-70 group-hover:opacity-100 transition-opacity">
                                    GitHub 源码
                                </a>
                            </li>
                            <li>
                                <a href="https://linux.do/t/topic/992628/9999" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-bug mr-2 group-hover:text-red-400"></i>
                                    反馈问题
                                </a>
                            </li>
                            <li>
                                <a href="about.html" class="text-gray-600 hover:text-indigo-600 transition-colors duration-200 flex items-center group">
                                    <i class="fas fa-info-circle mr-2 group-hover:text-blue-400"></i>
                                    关于项目
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 分隔线 -->
            <div class="border-t border-gray-700/50"></div>

            <!-- 底部信息 -->
            <div class="py-8">
                <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
                    <!-- 版权信息 -->
                    <div class="text-center md:text-left">
                        <p class="text-gray-600 text-sm">
                            © 2025 Linux.do Analyzer. Made with
                            <i class="fas fa-heart text-red-500 mx-1"></i>
                            for Linux.do Community
                        </p>
                        <p class="text-gray-500 text-xs mt-1">
                            Powered by Deno + TailwindCSS + Chart.js
                        </p>
                    </div>

                    <!-- 技术标识 -->
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-shield-alt text-green-500"></i>
                            <span>100% 本地处理</span>
                        </div>
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-lock text-blue-500"></i>
                            <span>数据安全</span>
                        </div>
                        <div class="flex items-center space-x-2 text-gray-600 text-sm">
                            <i class="fas fa-code text-purple-500"></i>
                            <span>开源项目</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部装饰 -->
        <div class="h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop"
            class="fixed bottom-8 right-8 w-12 h-12 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 opacity-0 invisible z-50"
            title="返回顶部">
        <i class="fas fa-chevron-up"></i>
    </button>

    <script>
        // 主题管理
        class ThemeManager {
            constructor() {
                this.currentTheme = localStorage.getItem('app-theme') || 'apple';
                this.init();
            }

            init() {
                this.applyTheme(this.currentTheme);
                this.setupThemeSelector();
            }

            applyTheme(theme) {
                document.documentElement.removeAttribute('data-theme');
                if (theme !== 'apple') {
                    document.documentElement.setAttribute('data-theme', theme);
                }
                const selector = document.getElementById('themeSelector');
                if (selector) {
                    selector.value = theme;
                }
                localStorage.setItem('app-theme', theme);
            }

            setupThemeSelector() {
                const selector = document.getElementById('themeSelector');
                if (selector) {
                    selector.addEventListener('change', (e) => {
                        this.applyTheme(e.target.value);
                    });
                }
            }
        }

        // 初始化主题管理器
        document.addEventListener('DOMContentLoaded', () => {
            new ThemeManager();

            // 移动端菜单功能
            const mobileMenuBtn = document.getElementById('mobileMenuBtn');
            const mobileMenu = document.getElementById('mobileMenu');
            const mobileMenuIcon = mobileMenuBtn.querySelector('i');

            mobileMenuBtn.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
                mobileMenuIcon.classList.toggle('fa-bars');
                mobileMenuIcon.classList.toggle('fa-times');
            });

            // 同步主题选择器
            const themeSelector = document.getElementById('themeSelector');
            const mobileThemeSelector = document.getElementById('mobileThemeSelector');

            themeSelector.addEventListener('change', function() {
                mobileThemeSelector.value = this.value;
            });

            mobileThemeSelector.addEventListener('change', function() {
                themeSelector.value = this.value;
                // 触发主题切换事件
                const event = new Event('change');
                themeSelector.dispatchEvent(event);
            });

            // 返回顶部按钮功能
            const backToTopButton = document.getElementById('backToTop');

            // 监听滚动事件 - 控制返回顶部按钮显示
            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    backToTopButton.classList.remove('opacity-0', 'invisible');
                    backToTopButton.classList.add('opacity-100', 'visible');
                } else {
                    backToTopButton.classList.add('opacity-0', 'invisible');
                    backToTopButton.classList.remove('opacity-100', 'visible');
                }
            });

            // 点击返回顶部
            backToTopButton.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });
    </script>

</body>
</html>
